<template>
  <div ref="map" style="height: 800px;">

  </div>
</template>

<script>
export default {
  data() {
    return {
      latitude: '32.040270',
      longitude: '118.783380',
      map: null,
      mapEl: null,
      startPosition: null
    }
  },
  methods: {
    setMap() {
      // 防止重复绘制地图
      if (this.map) {
        return;
      };

      // 获取存放地图的容器
      this.mapEl = this.$refs.map;
      //设置地图中心点
      this.startPosition = new TMap.LatLng(this.latitude, this.longitude);
      //定义工厂模式函数
      var myOptions = {
        rotation: 20, //设置地图旋转角度
        pitch: 30, //设置俯仰角度（0~45）
        zoom: 12, //设置地图缩放级别
        center: this.startPosition, //设置地图中心点坐标
        // mapTypeId:  window.TMap.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
      };
      try {
        // 开始生成地图
        this.map = new TMap.Map(this.mapEl, myOptions);
      } catch (error) {
        console.error('error:', error);
      }

    },
  },

  // methods: {
  //   // 获取当前位置
  //   getMyLocation() {
  //     this.geolocation.getLocation(this.showPosition, this.errorPosition); //开启定位
  //   },
  //   // 定位成功
  //   showPosition(position) {
  //     console.log('定位成功');
  //     this.longitude = position.lng;
  //     this.latitude = position.lat;
  //     this.queryParams.address = position.city + position.province + position.addr;
  //     // 定位成功后开始绘制地图
  //     this.setMap();
  //   },
  //   // 定位失败 继续尝试定位
  //   errorPosition(e) {
  //     console.log('定位失败，再次进行定位');
  //     // 此判断是防止多次绘制地图
  //     if (!this.map) {
  //       this.getMyLocation();
  //     }
  //   },

  // },


  mounted() {
    this.setMap()

  }
}

</script>
